/**
 * Created by xiangjiayu on 2017/7/19.
 */

import React from 'react';
import {Table, Icon, Button, Row, Col, Input, Select, DatePicker, Modal, Popconfirm, message, Tabs,Steps,Radio,Tooltip,Pagination,Popover,Timeline,Card,Checkbox} from 'antd';
import MyIcon from  'MyIcon/MyIcon';
import CheckBox from  '../../components/common/CheckBox/CheckBox';
import AddressSelect from '../../components/common/AddressSelect/AddressSelect';//省市级联
import AddInput from '../addinput/index';

//常用组件引用
const ButtonGroup = Button.Group;       //组合按钮
const Option = Select.Option;           //下拉框
const {MonthPicker, RangePicker} = DatePicker;//日历
const Step = Steps.Step;                //步骤条
const Search = Input.Search;    //搜所框
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const TabPane = Tabs.TabPane;


export default class ModalLizi extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tDate: [],
      isShowSearch: false,  // 搜索下拉
      city:'sheng',
      isShowewm:false,
      auntShare:false,
      //弹窗
      Modalfenpei: false,
      ModalChangeAunt: false,
      ModaladdMd:false,
      ModalQYSJ:false,
      ModalCity:false,
      ModalAuntResume:false,
      ModalAuntInfo:false,
      ModalAuntInfoError:false,
      ModalGTJL:false,
      ModalBYQ:false,
      ModalQYSHSJ:false,
      ModalDaoliu:false,
      ModalfenpeiPg:false,
      ModalPay:false,
      ModalNotice:false,
      Modalbili:false,
    };
  }

  //搜索下拉
  SearchToggle = (e) => {
    this.setState({
      'isShowSearch': !this.state.isShowSearch,
    })
  }
  //弹窗
  //分配
  showModalfenpei(Modalfenpei) {
    this.setState({Modalfenpei});
  }
  //更换月嫂
  showModalChangeAunt(ModalChangeAunt) {
    this.setState({ModalChangeAunt});
  }
  //添加门店
  showModaladdMd(ModaladdMd) {
    this.setState({ModaladdMd});
  }
  //区域设价
  showModalQYSJ(ModalQYSJ) {
    this.setState({ModalQYSJ});
  }
  //城市弹窗
  showModalCity(ModalCity) {
    this.setState({ModalCity});
  }
  //月嫂简历
  showModalAuntResume(ModalAuntResume) {
    this.setState({ModalAuntResume});
  }
  //导入月嫂
  showModalAuntInfo(ModalAuntInfo) {
    this.setState({ModalAuntInfo});
  }
  //导入月嫂信息
  showModalAuntInfoError(ModalAuntInfoError) {
    this.setState({ModalAuntInfoError});
  }
  //沟通记录
  showModalGTJL(ModalGTJL) {
    this.setState({ModalGTJL});
  }
  //备孕期
  showModalBYQ(ModalBYQ) {
    this.setState({ModalBYQ});
  }
    //区域商户设价
  showModalQYSHSJ(ModalQYSHSJ) {
    this.setState({ModalQYSHSJ});
  }
   //导流
  showModalDaoliu(ModalDaoliu) {
    this.setState({ModalDaoliu});
  }
  //分配派工单
  showModalfenpeiPg(ModalfenpeiPg) {
    this.setState({ModalfenpeiPg});
  }
  //支付
  showModalPay(ModalPay) {
    this.setState({ModalPay});
  }
  //弹窗公告
  showModalNotice(ModalNotice) {
    this.setState({ModalNotice});
  }
  //分润比例
  showModalbili(Modalbili) {
    this.setState({Modalbili});
  }

  handleCityChange = (e) => {
     this.setState({ city: e.target.value });
  }
  showEwm(isShowewm) {
    this.setState({isShowewm});
  }
  //弹窗-end
  render() {
    let that = this;
    let data_taocan = [
      {
        text: '套餐名称01',
        state: true,
      }, {
        text: '套餐名称',
        state: '',
      }, {
        text: '套餐名称02',
        state: '',
      }, {
        text: '套餐名称',
        state: '',
      }, {
        text: '套餐名称02',
        state: '',
      }, {
        text: '套餐名称02',
        state: '',
      }, {
        text: '套餐名称02',
        state: '',
      }, {
        text: '套餐名称02',
        state: '',
      }, {
        text: '套餐名称02',
        state: '',
      }, {
        text: '套餐名称02',
        state: '',
      }, {
        text: '套餐名称02',
        state: '',
      }, {
        text: '套餐名称02',
        state: '',
      }, {
        text: '套餐名称02',
        state: '',
      }, {
        text: '套餐名称02',
        state: '',
      }
    ];
    let data_Md_list = [
      {
        text: '门店名称01',
        state: true,
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }
    ];
    let data_shanghu = [
      {
        text: '门店名称01',
        state: true,
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }, {
        text: '门店名称02',
        state: '',
      }
    ];

    let { sortedInfo, filteredInfo } = this.state;
    sortedInfo = sortedInfo || {};
    filteredInfo = filteredInfo || {};
    const columns = [
      {
        title: '订单编号',
        dataIndex: 'orderNumber',
        key: 'orderNumber',
        render: text => <a href="javascript:void(0)" onClick={that._rightSlipLayer}>{text}</a>,
        fixed:'left',
        width:120,
        sorter: (a, b) => a.orderNumber - b.orderNumber,
        sortOrder: sortedInfo.columnKey === 'orderNumber' && sortedInfo.order,
      }, {
        title: '服务类型',
        dataIndex: 'serviceType',
        key: 'serviceType',
      }, {
        title: '订单类型',
        dataIndex: 'orderType',
        key: 'orderType',
      }, {
        title: '客户姓名',
        dataIndex: 'cuserName',
        key: 'cuserName',
      }, {
        title: '用工时间',
        dataIndex: 'serviceStartDate',
        key: 'serviceStartDate',
      }, {
        title: '服务地址',
        dataIndex: 'serviceAddress',
        key: 'serviceAddress',
        width:200,
        render:(value)=>{
          return (
            <Tooltip placement="topLeft" title={value}>
              <span>{value ? value.substr(0,16): ''}</span>
            </Tooltip>
          )
        }
      }, {
        title: '联系方式',
        dataIndex: 'cuserPhone',
        key: 'cuserPhone',
        render:(value)=>{
          return (
            <div className="table-contact">
              <Tooltip placement="top" title={value}>
                <span className="phone-span"><MyIcon type="phone"/></span>
              </Tooltip>
              <Tooltip placement="top" title={value}>
                <span className="phone-span"><MyIcon type="qq"/></span>
              </Tooltip>
            </div>
          )
        },
        className:'ant-table-th-center'
      }, {
        title: '客户收费',
        dataIndex: 'cmidFee',
        key: 'cmidFee',
        render:(value) => {
          return(
            <div className="">
              总：{value ? value[0] : '0'} / 欠：<span className="col-red">{value ? value[1] : '0'}</span>
            </div>
          )
        },
      }, {
        title: '月嫂收费',
        dataIndex: 'auntMidFee',
        key: 'auntMidFee',
      }, {
        title: '订单状态',
        dataIndex: 'flowStatus',
        key: 'flowStatus',
      }, {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        fixed:'right',
        width:120,

      }, {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        fixed:'right',
        width:140,
        render:()=>{
          return(
            <div className="table-a-cont">
              <a href="#">编辑合同</a>
              <a href="#">申请取消</a>
            </div>
          )
        },
      }];
    const pagination = {
      total: this.state.tDate.length,
      showSizeChanger: true,
    }
    const { current } = this.state;
    const city = this.state.city;
    const content = (
      <div className="share-aunt">
        <Row gutter={8}>
          <Col span={12}>
            <MyIcon type="qq"/>
          </Col>
          <Col span={12}>
            <span onClick={() => this.showEwm(true)}><MyIcon type="wechat"/></span>
            <div className={this.state.isShowewm ? 'share-ewm' : 'share-ewm dis-n' } onClick={() => this.showEwm(false)}>
              <img className="share-ewm-img" src="http://pic.qianmi.com/ejz/eimages-xc/erm02.png" alt=""/>
            </div>
          </Col>
        </Row>
      </div>
    );
    function confirm() {
      Modal.confirm({
        title: 'Confirm',
        content: 'Bla bla ...',
        okText: '确认',
        cancelText: '取消',
      });
    }
    const dataSource_error = [];
    for (let i = 0; i < 46; i++) {
      dataSource_error.push({
        key: i,
        num: i,
        content: `London, Park Lane no. ${i}`,
      });
    }


    const columns_error = [
      {
        title: '行号',
        dataIndex: 'num',
        key: 'num',
        className: 'ant-table-th-center',
        width:'20%'
      }, {
        title: '错误内容',
        dataIndex: 'content',
        key: 'content',
        width:'80%',
        render: (text) => {
          return (
            <Tooltip placement="top" title={text}>
              {text}
            </Tooltip>
          )
        }
      }
    ];

    const dataSource_bili = [{
      key: '1',
      name: '产后修复套餐A',
    }, {
      key: '2',
      name: '产后修复套餐A产后修复套餐A产后修复套餐A产后修复套餐A产后修复套餐A产后修复套餐A',
    }];

    const columns_bili = [{
      title: '套餐名称',
      dataIndex: 'name',
      key: 'name',
      render:(text) =>{
        return(
          text.length > 10 ?
          <Tooltip placement="top" title={text}>
            <p className="text-c">{text.substr(0,10)}...</p>
          </Tooltip>
          :
          <p className="text-c">{text}</p>
        )
      }
    }, {
      title: '分润',
      dataIndex: 'fenrun',
      key: 'fenrun',
      width:'60%',
      render:() => {
        return(
          <div>
            <Row gutter={16}>
              <Col span={12}>
                <Select defaultValue="百分比" size="large">
                  <Option value="百分比">百分比</Option>
                </Select>
              </Col>
              <Col span={12}>
                <Input size="large" addonAfter="%" defaultValue="20" />
              </Col>
            </Row>
          </div>
        )
      }
    }];
    return (
      <div className="modal-example-cont">
        {/*分配线索单*/}
        <Button onClick={() => this.showModalfenpei(true)}>分配线索单</Button>
        <Modal
          title="分配线索单"
          wrapClassName="vertical-center-modal"
          visible={this.state.Modalfenpei}
          onCancel={() => this.showModalfenpei(false)}
          okText="确认分配"
          cancelText="取消"
        >
          <div className="modal-checkbox">
            <Tabs defaultActiveKey="1">
              <TabPane tab="套餐" key="1">
                <div className="modal-checkbox-max">
                  <CheckBox data={data_taocan}></CheckBox>
                </div>
              </TabPane>
              <TabPane tab="商品" key="2">
                <div className="empty">
                  <p>无指定服务门店</p>
                </div>
              </TabPane>
            </Tabs>
            <Tabs defaultActiveKey="2">
              <TabPane tab="自动分配到最近门店" key="1">
                <div className="modal-checkbox-max">
                  <CheckBox data={data_taocan}></CheckBox>
                </div>
              </TabPane>
              <TabPane tab="指定服务门店" key="2">
                <div className="empty">
                  <p>无指定服务门店</p>
                </div>
              </TabPane>
            </Tabs>
          </div>
        </Modal>
        {/*更换月嫂*/}
        <Button onClick={() => this.showModalChangeAunt(true)}>更换月嫂</Button>
        <Modal
          title={<span>选择月嫂<span className="modal-title-grey">(已选择<em className="num">0</em>位)</span></span>}
          wrapClassName="vertical-center-modal"
          visible={this.state.ModalChangeAunt}
          onCancel={() => this.showModalChangeAunt(false)}
          width="1000"
          okText="确认"
          cancelText="取消"
        >
          <div className="modal-ChoiceAunt">
            <div className="search-cont">
              <Row gutter={16}>
                <Col span={8}>
                  <Search size="large"
                          placeholder="请输入月嫂姓名、手机号或身份证号"
                  />
                </Col>
                <Col span={6}>
                  <Select defaultValue="请选择服务小类" size="large">
                    <Option value="请选择服务小类">请选择服务小类</Option>
                    <Option value="长期钟点工">长期钟点工</Option>
                    <Option value="老人陪护">老人陪护</Option>
                  </Select>
                </Col>
                <Col span={6}>
                  <Select defaultValue="当前忙闲状态" size="large">
                    <Option value="当前忙闲状态">当前忙闲状态</Option>
                    <Option value="有空">有空</Option>
                    <Option value="工作">工作</Option>
                  </Select>
                </Col>
                <div className="search-btncont search-btncontfr">
                  <ButtonGroup>
                    <Button size="large" type="primary">搜索</Button>
                    <Button size="large" type="primary" onClick={this.SearchToggle}>
                      <Icon type={this.state.isShowSearch ? 'up' : 'down'}/>
                    </Button>
                  </ButtonGroup>
                </div>
              </Row>
              <div className={this.state.isShowSearch ? 'search-more' : 'search-more dis-n'}>
                <Row gutter={16}>
                  <Col span={6}>
                    <Select defaultValue="是否可以住家" size="large">
                      <Option value="是否可以住家">是否可以住家</Option>
                      <Option value="是">是</Option>
                      <Option value="否">否</Option>
                    </Select>
                  </Col>
                  <Col span={6}>
                    <Select defaultValue="请选择级别" size="large">
                      <Option value="请选择级别">请选择级别</Option>
                      <Option value="9-12点">9-12点</Option>
                      <Option value="8-10点">8-10点</Option>
                    </Select>
                  </Col>
                  <Col span={6}>
                    <Select defaultValue="请选择普通话水平" size="large">
                      <Option value="请选择普通话水平">请选择普通话水平</Option>
                      <Option value="标准">标准</Option>
                      <Option value="一般">一般</Option>
                      <Option value="乡音">乡音</Option>
                    </Select>
                  </Col>
                  <Col span={6}>
                    <Select defaultValue="请选择年龄" size="large">
                      <Option value="请选择年龄">请选择年龄</Option>
                      <Option value="30岁以下">30岁以下</Option>
                      <Option value="30-45岁">30-45岁</Option>
                      <Option value="45岁以上">45岁以上</Option>
                    </Select>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={6}>
                    <Select defaultValue="请选择学历" size="large">
                      <Option value="请选择学历">请选择学历</Option>
                      <Option value="未上学">未上学</Option>
                      <Option value="小学">小学</Option>
                      <Option value="初中">初中</Option>
                      <Option value="高中">高中</Option>
                      <Option value="大专">大专</Option>
                      <Option value="本科">本科</Option>
                    </Select>
                  </Col>
                  <Col span={6}>
                    <Select defaultValue="请选择烧饭水平" size="large">
                      <Option value="请选择烧饭水平">请选择烧饭水平</Option>
                      <Option value="不会">不会</Option>
                      <Option value="一般">一般</Option>
                      <Option value="很好">很好</Option>
                    </Select>
                  </Col>
                  <Col span={6}>
                    <Select defaultValue="请选择婚姻状况" size="large">
                      <Option value="请选择婚姻状况">请选择婚姻状况</Option>
                      <Option value="未婚">未婚</Option>
                      <Option value="已婚">已婚</Option>
                      <Option value="离异">离异</Option>
                    </Select>
                  </Col>
                  <Col span={6}>
                    <Select defaultValue="请选择属相" size="large">
                      <Option value="请选择属相">请选择属相</Option>
                      <Option value="牛">牛</Option>
                      <Option value="鼠">鼠</Option>
                      <Option value="马">马</Option>
                      <Option value="羊">羊</Option>
                    </Select>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={6}>
                    <Select defaultValue="请选择性别" size="large">
                      <Option value="请选择性别">请选择性别</Option>
                      <Option value="男">男</Option>
                      <Option value="女">女</Option>
                    </Select>
                  </Col>
                  <Col span={6}>
                    <Select defaultValue="请选择登记人" size="large">
                      <Option value="请选择登记人">请选择登记人</Option>
                    </Select>
                  </Col>
                  <Col span={6}>
                    <Select defaultValue="请选择上架状态" size="large">
                      <Option value="请选择上架状态">请选择上架状态</Option>
                      <Option value="已上架">已上架</Option>
                      <Option value="已下架">已下架</Option>
                    </Select>
                  </Col>
                  <Col span={6}>
                    <Select defaultValue="请选择全职或者兼职" size="large">
                      <Option value="请选择全职或者兼职">请选择全职或者兼职</Option>
                      <Option value="全职">全职</Option>
                      <Option value="兼职">兼职</Option>
                    </Select>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={6}>
                    <AddressSelect  />
                  </Col>
                  <Col span={6}>
                    <Select defaultValue="请选择在职状态" size="large">
                      <Option value="请选择在职状态">请选择在职状态</Option>
                      <Option value="在职">在职</Option>
                      <Option value="待岗">待岗</Option>
                    </Select>
                  </Col>
                  <Col span={6}>
                    <Input size="large" placeholder="请输入现居地址"/>
                  </Col>
                </Row>
              </div>
            </div>
            <div className="slip-cont">
              <div className="slip-cont-b">
                <div className="ms-aunt-info">
                  <div className="border-top">
                    <Row gutter={32}>
                      <Col span={8}>
                        <div className="dis-table">
                          <div className="dis-table-cell"><img src="http://resources.1000.com/ehome/dev/00001/1492397718161.jpg" width="45" height="45" alt="月嫂头像" className="tx"/></div>
                          <div className="dis-table-cell base-info">
                            <a href="javascript:void(0)" className="name col-blue" title="汪嘉旻小月嫂">汪嘉旻小月嫂</a>
                            <span className="age">50岁</span>
                            <span className="address">江苏省,南京市</span>
                            <p className="zm-p">
                              <em className="zm-em">身份证</em>
                              <em className="zm-em">全职</em>
                              <em className="zm-em">待岗</em>
                            </p>
                          </div>
                        </div>
                      </Col>
                      <Col span={8}>
                        <div className="mianshi">
                          <div className="mianshi-cont"><span className="dis-b">已面试</span><span className="num">2</span>次</div>
                          <div className="mianshi-cont"><span className="dis-b">成功上工</span><span className="num">8</span>次</div>
                        </div>
                      </Col>
                      <Col span={8}>
                        <div className="dis-table contact-mh">
                          <div className="dis-table-cell">
                            <div className="info-contact">
                              <Tooltip placement="top" title="18061470286">
                                <span className="phone-span"><MyIcon type="phone"/></span>
                              </Tooltip>
                              <span className="phone-span disabled"><MyIcon type="qq"/></span>
                            </div>
                          </div>
                          <div className="dis-table-cell">
                            <div className="mianshi-btn">
                              <ButtonGroup>
                                <Button type="default">申请调度</Button>
                              </ButtonGroup>
                            </div>
                          </div>
                        </div>
                      </Col>
                    </Row>
                  </div>
                  <div className="border-top">
                    <Row gutter={32}>
                      <Col span={8}>
                        <div className="dis-table">
                          <div className="dis-table-cell"><img src="http://resources.1000.com/ehome/dev/00001/1492397718161.jpg" width="45" height="45" alt="月嫂头像" className="tx"/></div>
                          <div className="dis-table-cell base-info">
                            <a href="javascript:void(0)" className="name col-blue" title="汪嘉旻小月嫂">汪嘉旻小月嫂</a>
                            <span className="age">50岁</span>
                            <span className="address">江苏省,南京市</span>
                            <p className="zm-p">
                              <em className="zm-em">身份证</em>
                              <em className="zm-em">全职</em>
                              <em className="zm-em">待岗</em>
                            </p>
                          </div>
                        </div>
                      </Col>
                      <Col span={8}>
                        <div className="mianshi">
                          <div className="mianshi-cont"><span className="dis-b">已面试</span><span className="num">2</span>次</div>
                          <div className="mianshi-cont"><span className="dis-b">成功上工</span><span className="num">8</span>次</div>
                        </div>
                      </Col>
                      <Col span={8}>
                        <div className="dis-table contact-mh">
                          <div className="dis-table-cell">
                            <div className="info-contact">
                              <Tooltip placement="top" title="18061470286">
                                <span className="phone-span"><MyIcon type="phone"/></span>
                              </Tooltip>
                              <span className="phone-span disabled"><MyIcon type="qq"/></span>
                            </div>
                          </div>
                          <div className="dis-table-cell">
                            <div className="mianshi-btn">
                              <ButtonGroup>
                                <Button type="default" loading>等待调度</Button>
                              </ButtonGroup>
                            </div>
                          </div>
                        </div>
                      </Col>
                    </Row>
                  </div>
                  <div className="border-top">
                    <Row gutter={32}>
                      <Col span={8}>
                        <div className="dis-table">
                          <div className="dis-table-cell"><img src="http://resources.1000.com/ehome/dev/00001/1492397718161.jpg" width="45" height="45" alt="月嫂头像" className="tx"/></div>
                          <div className="dis-table-cell base-info">
                            <a href="javascript:void(0)" className="name col-blue" title="汪嘉旻小月嫂">汪嘉旻小月嫂</a>
                            <span className="age">50岁</span>
                            <span className="address">江苏省,南京市</span>
                            <p className="zm-p">
                              <em className="zm-em">身份证</em>
                              <em className="zm-em">全职</em>
                              <em className="zm-em">待岗</em>
                            </p>
                          </div>
                        </div>
                      </Col>
                      <Col span={8}>
                        <div className="mianshi">
                          <div className="mianshi-cont"><span className="dis-b">已面试</span><span className="num">2</span>次</div>
                          <div className="mianshi-cont"><span className="dis-b">成功上工</span><span className="num">8</span>次</div>
                        </div>
                      </Col>
                      <Col span={8}>
                        <div className="dis-table contact-mh">
                          <div className="dis-table-cell">
                            <div className="info-contact">
                              <Tooltip placement="top" title="18061470286">
                                <span className="phone-span"><MyIcon type="phone"/></span>
                              </Tooltip>
                              <span className="phone-span disabled"><MyIcon type="qq"/></span>
                            </div>
                          </div>
                          <div className="dis-table-cell">
                            <div className="mianshi-btn">
                              <ButtonGroup>
                                <Button type="default" onClick={() => this.setModalChartVisible(true)}>沟通</Button>
                                <Button type="default">选择</Button>
                              </ButtonGroup>
                            </div>
                          </div>
                        </div>
                      </Col>
                    </Row>
                  </div>
                  <div className="border-top active">
                    <Row gutter={32}>
                      <Col span={8}>
                        <div className="dis-table">
                          <div className="dis-table-cell"><img src="http://resources.1000.com/ehome/dev/00001/1492397718161.jpg" width="45" height="45" alt="月嫂头像" className="tx"/></div>
                          <div className="dis-table-cell base-info">
                            <a href="javascript:void(0)" className="name col-blue" title="汪嘉旻小月嫂">汪嘉旻小月嫂</a>
                            <span className="age">50岁</span>
                            <span className="address">江苏省,南京市</span>
                            <p className="zm-p">
                              <em className="zm-em">身份证</em>
                              <em className="zm-em">全职</em>
                              <em className="zm-em">待岗</em>
                            </p>
                          </div>
                        </div>
                      </Col>
                      <Col span={8}>
                        <div className="mianshi">
                          <div className="mianshi-cont"><span className="dis-b">已面试</span><span className="num">2</span>次</div>
                          <div className="mianshi-cont"><span className="dis-b">成功上工</span><span className="num">8</span>次</div>
                        </div>
                      </Col>
                      <Col span={8}>
                        <div className="dis-table contact-mh">
                          <div className="dis-table-cell">
                            <div className="info-contact">
                              <Tooltip placement="top" title="18061470286">
                                <span className="phone-span"><MyIcon type="phone"/></span>
                              </Tooltip>
                              <span className="phone-span"><MyIcon type="qq"/></span>
                            </div>
                          </div>
                          <div className="dis-table-cell">
                            <div className="mianshi-btn">
                              <ButtonGroup>
                                <Button type="default" onClick={() => this.setModalChartVisible(true)}>沟通</Button>
                                <Button type="primary">已选</Button>
                              </ButtonGroup>
                            </div>
                          </div>
                        </div>
                      </Col>
                    </Row>
                  </div>
                </div>
              </div>
              <div className="pages"><Pagination defaultCurrent={1} total={50} /></div>
            </div>
          </div>
        </Modal>
        {/*添加门店*/}
        <Button onClick={() => this.showModaladdMd(true)}>添加门店</Button>
        <Modal
          title="添加门店"
          wrapClassName="vertical-center-modal"
          visible={this.state.ModaladdMd}
          onCancel={() => this.showModaladdMd(false)}
          okText="确认"
          cancelText="取消"
        >
          <div className="modal-search">
            <Search
              placeholder="请输入门店名称"
              size="large"
            />
          </div>
          <div className="checkbox-li-fix">
            <CheckBox data={data_Md_list}></CheckBox>
          </div>
        </Modal>
        {/*区域设价*/}
        <Button onClick={() => this.showModalQYSJ(true)}>区域设价</Button>
        <Modal
          title="区域设价"
          wrapClassName="vertical-center-modal"
          visible={this.state.ModalQYSJ}
          onCancel={() => this.showModalQYSJ(false)}
          okText="确认"
          cancelText="取消"
        >
          <AddInput />
        </Modal>
        {/*城市*/}
        <Button onClick={() => this.showModalCity(true)}>城市</Button>
        <Modal
          title={<span className="city-cy">常用城市：<a className="city-cy-name">上海</a><a className="city-cy-name">南京</a><a className="city-cy-name">杭州</a></span>}
          wrapClassName="vertical-center-modal"
          visible={this.state.ModalCity}
          onCancel={() => this.showModalCity(false)}
          okText="确认"
          cancelText="取消"
          width='600'
        >
          <div className="city">
            <div className="city-title">
              <span className="name ant-form-item-control">全国城市：</span>
              <span className="right">
                <Radio.Group value={city} onChange={this.handleCityChange}>
                  <Radio.Button value="sheng">省份</Radio.Button>
                  <Radio.Button value="pin">拼音</Radio.Button>
                </Radio.Group>
              </span>
            </div>
            <div className="city-body">
              <Row gutter={16}>
                <Col span={6} className="text-r" style={{'padding-right':0}}>
                  <div className="ant-form-item-label"><label>新疆维吾尔自治区</label></div>
                </Col>
                <Col span={18}>
                  <div className="ant-form-item-control">
                    <a className="btn-link">北京</a>
                    <a className="btn-link">天津</a>
                    <a className="btn-link">上海</a>
                    <a className="btn-link">重庆</a>
                  </div>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col span={3} className="text-r" style={{'padding-right':0}}>
                  <div className="ant-form-item-label"><label>广东市</label></div>
                </Col>
                <Col span={21}>
                  <div className="ant-form-item-control">
                    <a className="btn-link">广州</a>
                    <a className="btn-link">深圳</a>
                    <a className="btn-link">东莞</a>
                    <a className="btn-link">佛山</a>
                    <a className="btn-link">惠州</a>
                    <a className="btn-link">江门</a>
                    <a className="btn-link">清远</a>
                    <a className="btn-link">珠海</a>
                    <a className="btn-link">珠海</a>
                    <a className="btn-link">珠海</a>
                    <a className="btn-link">珠海</a>
                    <a className="btn-link">珠海</a>
                    <a className="btn-link">珠海</a>
                    <a className="btn-link">珠海</a>
                    <a className="btn-link">珠海</a>
                  </div>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col span={3} className="text-r" style={{'padding-right':0}}>
                  <div className="ant-form-item-label"><label>安徽</label></div>
                </Col>
                <Col span={21}>
                  <div className="ant-form-item-control">
                    <a className="btn-link">合肥</a>
                    <a className="btn-link">阜阳</a>
                    <a className="btn-link">亳州</a>
                    <a className="btn-link">滁州</a>
                  </div>
                </Col>
              </Row>
            </div>
          </div>
        </Modal>
        {/*月嫂简历*/}
        <Button onClick={() => this.showModalAuntResume(true)}>月嫂简历</Button>
        <Modal
          title={
            <div className="modal-aunt-resume-title">
              <span className="name">月嫂简历</span>
              <div className="modal-resume-share">
                <Popover
                  title={
                    <div className="share-title">
                      分享简历
                      <a onClick={confirm} className="share-link">http://login.bm001.com/aunt/resume?auntId=A0062796</a>
                    </div>
                  }
                  placement="bottomLeft"
                  content={content}
                >
                    <span className="share-span" title="分享月嫂简历"><Icon type="export" /></span>
                </Popover>
              </div>
            </div>
          }
          wrapClassName="vertical-center-modal modal-aunt-resume"
          visible={this.state.ModalAuntResume}
          onCancel={() => this.showModalAuntResume(false)}
          footer={null}
          width='1000'
        >
          <div className="aunt-resume">
            <iframe width="1000" height="600" src="http://jz.bm001.com/aunt/resume?auntId=A0062796&_t=1510386621170" frameborder="0" data-reactid=".0.2.d.0.0.1.0"></iframe>
          </div>
        </Modal>
        {/*导入月嫂*/}
        <Button onClick={() => this.showModalAuntInfo(true)}>导入月嫂</Button>
        <Modal
          title="导入月嫂"
          wrapClassName="vertical-center-modal"
          visible={this.state.ModalAuntInfo}
          onCancel={() => this.showModalAuntInfo(false)}
          okText="开始导入"
          cancelText="取消"
          width="490"
        >
          <Timeline>
            <Timeline.Item>
              <Row gutter={8}>
                <Col span={24}>
                  <p>下载表格，并按照格式填入您的数据：</p>
                </Col>
              </Row>
              <div className="aunt-info-bg">
                <Row gutter={8}>
                  <Col span={19}>
                    <div className="aunt-name">
                      <Icon type="file-excel" />
                      <Tooltip placement="topLeft" title="月嫂详情资料表格填写.excel">
                        <span className="name">月嫂详情资料表格填写.excel</span>
                      </Tooltip>
                    </div>
                  </Col>
                  <Col span={5}>
                    <Button className="ant-btn-info">点击下载</Button>
                  </Col>
                </Row>
              </div>
            </Timeline.Item>
            <Timeline.Item>
              <Row gutter={8}>
                <Col span={24}>
                  <p>上传您填好的表格</p>
                </Col>
              </Row>
              <div className="aunt-info-bg">
                <Row gutter={8} className="text-c">
                  <Col span={24}>
                    <div className="upfile">
                      <input type="file"/>
                      <Button className="ant-btn-info">点击上传</Button>{/*加载中 加loading*/}
                    </div>
                  </Col>
                </Row>
              </div>
              <Row gutter={8}>
                <Col span={24}>
                  <p className="tips-p">一次性最多导入500条，五分钟内只能导入一次</p>
                </Col>
              </Row>
            </Timeline.Item>
          </Timeline>
        </Modal>
        {/*导入月嫂信息*/}
        <Button onClick={() => this.showModalAuntInfoError(true)}>导入月嫂信息</Button>
        <Modal
          title="导入月嫂信息"
          wrapClassName="vertical-center-modal"
          visible={this.state.ModalAuntInfoError}
          onCancel={() => this.showModalAuntInfoError(false)}
          okText="确认"
          confirmLoading=""
          cancelText="取消"
          width='600'
        >
          <div className="modal-num">
            <Row gutter={16}>
              <Col span={8}>
                <span className="name-disb">一共选择</span>
                <span className="num">2000</span>条
              </Col>
              <Col span={8}>
                <span className="name-disb">成功导入</span>
                <span className="num">2000</span>条
              </Col>
              <Col span={8}>
                <span className="name-disb">失败</span>
                <span className="num col-red">2000</span>条
              </Col>
            </Row>
          </div>
          <div className="modal-num-error">
            <Icon type="exclamation-circle-o" />
            <span className="num-error-title">失败内容</span>
            <Button type="primary" loading>导出错误内容</Button>
          </div>
          <Table dataSource={dataSource_error} columns={columns_error} scroll={{ y: 300 }}  />
        </Modal>
        {/*沟通记录*/}
        <Button onClick={() => this.showModalGTJL(true)}>沟通记录</Button>
        <Modal
          title="沟通记录"
          wrapClassName="vertical-center-modal"
          visible={this.state.ModalGTJL}
          onCancel={() => this.showModalGTJL(false)}
          okText="确认"
          cancelText="取消"
          width='600'
        >
          <div className="textarea-surplus">
            <Input type="textarea" rows={10} placeholder="请输入沟通记录"/>
            <p>还可以输入140字</p>
          </div>
          <div className="modal-gtjl">
            <Timeline pending={<span className="col-grey">没有了...</span>}>
            <Timeline.Item>
              <div className="gtjl-log-time">
                <h4>2017年07月12日</h4>
              </div>
              <div className="gtjl-log-cont">
                <Row gutter={16}>
                  <Col span={3}>姓名：</Col>
                  <Col span={21}>
                    <a href="#" className="col-blue name">月嫂名字</a>
                    <span className="col-grey">订单编号：JZ23400302</span>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3}>时间：</Col>
                  <Col span={21}><Icon type="calendar" />2016-08-01 16:06:04</Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3}>沟通人：</Col>
                  <Col span={21}>小金鱼</Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3}>公司：</Col>
                  <Col span={21}>小金鱼家政公司</Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3}>评价：</Col>
                  <Col span={21}>
                    面试表现的不是很好，没有表现出平时应有的水准，客户也有些挑剔,面试表现的不是很好， 没有表现出平时应有的水准，客户也有些挑剔,面试表现的不是很好，没有表现出平时应有的水准，客户也有些挑剔
                  </Col>
                </Row>
              </div>
            </Timeline.Item>
            <Timeline.Item>
              <div className="gtjl-log-time">
                <h4>2017年07月12日</h4>
              </div>
              <div className="gtjl-log-cont">
                <Row gutter={16}>
                  <Col span={3}>姓名：</Col>
                  <Col span={21}>
                    <a href="#" className="col-blue name">月嫂名字</a>
                    <span className="col-grey">订单编号：JZ23400302</span>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3}>时间：</Col>
                  <Col span={21}><Icon type="calendar" />2016-08-01 16:06:04</Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3}>沟通人：</Col>
                  <Col span={21}>小金鱼</Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3}>公司：</Col>
                  <Col span={21}>小金鱼家政公司</Col>
                </Row>
                <Row gutter={16}>
                  <Col span={3}>评价：</Col>
                  <Col span={21}>
                    面试表现的不是很好，没有表现出平时应有的水准，客户也有些挑剔,面试表现的不是很好， 没有表现出平时应有的水准，客户也有些挑剔,面试表现的不是很好，没有表现出平时应有的水准，客户也有些挑剔
                  </Col>
                </Row>
              </div>
            </Timeline.Item>
          </Timeline>
          </div>
        </Modal>
        {/*备孕期-备孕*/}
        <Button onClick={() => this.showModalBYQ(true)}>备孕期-备孕</Button>
        <Modal
          title="备孕期-备孕"
          wrapClassName="vertical-center-modal"
          visible={this.state.ModalBYQ}
          onCancel={() => this.showModalBYQ(false)}
          okText="确认"
          cancelText="取消"
          width='600'
        >
          <div className="btn-add-title">阳虚质</div>
          <div className="btn-add-cont">
            <div className="btn-hover">
              <Button type="primary">乳腺速通</Button>
              <div className="btn-hover-cont">
                <a href="javascript:void(0)" className="btn-hover-link">编辑</a>
                <a href="javascript:void(0)" className="btn-hover-link">删除</a>
              </div>
            </div>
            <div className="btn-hover">
              <Button type="primary">五行经络疏通</Button>
              <div className="btn-hover-cont">
                <a href="javascript:void(0)" className="btn-hover-link">编辑</a>
                <a href="javascript:void(0)" className="btn-hover-link">删除</a>
              </div>
            </div>
            <div className="btn-hover">
              <Button type="primary">五行经络疏通</Button>
              <div className="btn-hover-cont">
                <a href="javascript:void(0)" className="btn-hover-link">编辑</a>
                <a href="javascript:void(0)" className="btn-hover-link">删除</a>
              </div>
            </div>
            <div className="btn-hover">
              <Button type="primary">五行经络疏通</Button>
              <div className="btn-hover-cont">
                <a href="javascript:void(0)" className="btn-hover-link">编辑</a>
                <a href="javascript:void(0)" className="btn-hover-link">删除</a>
              </div>
            </div>
            <div className="btn-hover">
              <Button type="primary">五行经络疏通</Button>
              <div className="btn-hover-cont">
                <a href="javascript:void(0)" className="btn-hover-link">编辑</a>
                <a href="javascript:void(0)" className="btn-hover-link">删除</a>
              </div>
            </div>
            <Button className="ant-btn-info" type=""><Icon type="plus" />添加商品</Button>
          </div>
          <div className="btn-add-title">阳虚质</div>
          <div className="btn-add-cont">
            <div className="btn-hover">
              <Button type="primary">乳腺速通</Button>
              <div className="btn-hover-cont">
                <a href="javascript:void(0)" className="btn-hover-link">编辑</a>
                <a href="javascript:void(0)" className="btn-hover-link">删除</a>
              </div>
            </div>
            <div className="btn-hover">
              <Button type="primary">五行经络疏通</Button>
              <div className="btn-hover-cont">
                <a href="javascript:void(0)" className="btn-hover-link">编辑</a>
                <a href="javascript:void(0)" className="btn-hover-link">删除</a>
              </div>
            </div>
            <div className="btn-hover">
              <Button type="primary">五行经络疏通</Button>
              <div className="btn-hover-cont">
                <a href="javascript:void(0)" className="btn-hover-link">编辑</a>
                <a href="javascript:void(0)" className="btn-hover-link">删除</a>
              </div>
            </div>
            <div className="btn-hover">
              <Button type="primary">五行经络疏通</Button>
              <div className="btn-hover-cont">
                <a href="javascript:void(0)" className="btn-hover-link">编辑</a>
                <a href="javascript:void(0)" className="btn-hover-link">删除</a>
              </div>
            </div>
            <div className="btn-hover">
              <Button type="primary">五行经络疏通</Button>
              <div className="btn-hover-cont">
                <a href="javascript:void(0)" className="btn-hover-link">编辑</a>
                <a href="javascript:void(0)" className="btn-hover-link">删除</a>
              </div>
            </div>
            <Button className="ant-btn-info" type=""><Icon type="plus" />添加商品</Button>
          </div>
        </Modal>
        {/*区域商户设价*/}
        <Button onClick={() => this.showModalQYSHSJ(true)}>区域商户设价</Button>
        <Modal
          title="区域商户设价"
          wrapClassName="vertical-center-modal"
          visible={this.state.ModalQYSHSJ}
          onCancel={() => this.showModalQYSHSJ(false)}
          okText="确认"
          cancelText="取消"
          width='600'
        >
          <Card
              title="选择商户"
              noHovering={true}
              extra={<Checkbox>全选</Checkbox>}
          >
            <div className="modal-checkbox-max">
              <CheckBox data={data_shanghu}></CheckBox>
            </div>
          </Card>
          <div className="mt8">
            <div className="add-cont">
              <Row gutter={16}>
                <Col span={3} className="text-r">
                    <div className="ant-form-item-label">
                      <label>销售价格</label>
                    </div>
                </Col>
                <Col span={8}>
                  <Input size="large" value="0" placeholder="请输入销售价格"/>
                </Col>
                <Col span={2}>
                  <span className="danwei">元</span>
                </Col>
              </Row>
            </div>
          </div>
        </Modal>
        {/*导流*/}
        <Button onClick={() => this.showModalDaoliu(true)}>导流</Button>
        <Modal
          title={<span>套餐名称：<span className="num">套餐A</span></span>}
          wrapClassName="vertical-center-modal"
          visible={this.state.ModalDaoliu}
          onCancel={() => this.showModalDaoliu(false)}
          okText="确认"
          cancelText="取消"
          width='400'
        >
          <CheckBox data={data_taocan}></CheckBox>
          <div className="mt8">
            <div className="add-cont">
              <Row gutter={16}>
                <Col span={5} className="text-r">
                  <div className="ant-form-item-label">
                    <label>选择商户</label>
                  </div>
                </Col>
                <Col span={10}>
                  <Select defaultValue="请选择商户" size="large">
                    <Option value="请选择商户">请选择商户</Option>
                  </Select>
                </Col>
              </Row>
            </div>
          </div>
        </Modal>
        {/*分配派工单*/}
        <Button onClick={() => this.showModalfenpeiPg(true)}>分配派工单</Button>
        <Modal
          title="分配派工单"
          wrapClassName="vertical-center-modal"
          visible={this.state.ModalfenpeiPg}
          onCancel={() => this.showModalfenpeiPg(false)}
          okText="确认"
          cancelText="取消"
        >
          <div className="modal-checkbox add-cont">
            <Tabs defaultActiveKey="1">
              <TabPane tab="给本店阿姨" key="1">
                <Row gutter={16}>
                  <Col span={5} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">阿姨姓名</span></label>
                    </div>
                  </Col>
                  <Col span={10}>
                    <div className="ant-form-item-control">
                      <Input size="large" type="input" placeholder="请输入阿姨姓名"/>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={5} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">服务时间</span></label>
                    </div>
                  </Col>
                  <Col span={10}>
                    <div className="ant-form-item-control">
                      <RangePicker  size="large" />
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={5} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">服务地点</span></label>
                    </div>
                  </Col>
                  <Col span={10}>
                    <div className="ant-form-item-control">
                      <Select
                        size="large"
                        defaultValue="请选择服务地点"
                      >
                        <Option value="请选择服务地点">请选择服务地点</Option>
                        <Option value="上门">上门</Option>
                        <Option value="到店">到店</Option>
                        <Option value="其他">其他</Option>
                      </Select>
                    </div>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span={5} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">备注</span></label>
                    </div>
                  </Col>
                  <Col span={19}>
                    <div className="ant-form-item-control">
                      <div className="textarea-surplus">
                        <Input type="textarea" rows="5" size="large" placeholder="请输入备注"/>
                        <p>还可以输入80字</p>
                      </div>
                    </div>
                  </Col>
                </Row>
              </TabPane>
              <TabPane tab="给其他商户" key="2">
                <Row gutter={16}>
                  <Col span={5} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">商户名称</span></label>
                    </div>
                  </Col>
                  <Col span={10}>
                    <div className="ant-form-item-control">
                      <Input size="large" type="input" placeholder="请输入商户名称"/>
                    </div>
                  </Col>
                </Row>
              </TabPane>
            </Tabs>
          </div>
        </Modal>
        {/*支付弹窗*/}
        <Button onClick={() => this.showModalPay(true)}>支付弹窗</Button>
        <Modal
          wrapClassName="vertical-center-modal modal-no-bg"
          visible={this.state.ModalPay}
          onCancel={() => this.showModalPay(false)}
          footer={null}
        >
          <img src="http://pic.qianmi.com/ejz/ejz2.0/img/product/68-2.jpg" width="200" height="200" alt=""/>
        </Modal>
        {/*公告弹窗*/}
        <Button onClick={() => this.showModalNotice(true)}>公告弹窗</Button>
        <Modal
          title="公告"
          wrapClassName="vertical-center-modal"
          visible={this.state.ModalNotice}
          onCancel={() => this.showModalNotice(false)}
          footer={
            <Button type="primary">关闭</Button>
          }
        >
          <p>大家好！今天下午15:00在双鱼座开会。测试</p>
        </Modal>
        {/*分润比例*/}
        <Button onClick={() => this.showModalbili(true)}>栗子分润比例</Button>
        <Modal
          title="分润比例"
          wrapClassName="vertical-center-modal"
          visible={this.state.Modalbili}
          onCancel={() => this.showModalbili(false)}
          width={620}
        >
          <div className="add-cont">
            <Row gutter={16}>
              <Col span={10}>
                <Row gutter={16}>
                  <Col span={6} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">阿姨姓名</span></label>
                    </div>
                  </Col>
                  <Col span={18}>
                    <div className="ant-form-item-control">
                      <Input size="large" type="input" placeholder="请输入阿姨姓名"/>
                    </div>
                  </Col>
                </Row>
              </Col>
              <Col span={10}>
                <Row gutter={16}>
                  <Col span={6} className="text-r">
                    <div className="ant-form-item-label">
                      <label><span className="span-left">结算方式</span></label>
                    </div>
                  </Col>
                  <Col span={18}>
                    <div className="ant-form-item-control">
                      <Select defaultValue="请选择结算方式" size="large">
                        <Option value="请选择结算方式">请选择结算方式</Option>
                      </Select>
                    </div>
                  </Col>
                </Row>
              </Col>
              <Col span={4} className="text-r">
                <Button size="large" className="ant-btn-info">批量设置</Button>
              </Col>
            </Row>
          </div>
          <div className="mt8">
            <Table bordered dataSource={dataSource_bili} columns={columns_bili} />
          </div>
        </Modal>
      </div>
    )
  }
}